<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>驾校管理修改</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="css/layuiAdmin.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <script src="../../static/js/avalon.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>

<body>

    <div class="layui-card xyxx" ms-controller="test">
        <div class="layui-card-header">驾校管理修改</div>
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action=""  >
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">省份：</label>
                        <div class="layui-input-block">
                            <select name="provinceId"  id='provinceId':duplex="@eiditinfo.provinceId" lay-filter="provinceSelect">
                                <option ms-attr="{value: el.code}" ms-for="($index, el) in @provlist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">市辖：</label>
                        <div class="layui-input-block">
                            <select name="cityId"  id='cityId' :duplex="@eiditinfo.cityId" lay-filter="regionSelect">
                                <option ms-attr="{value: el.code}" ms-for="($index, el) in @regionlist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">区县：</label>
                        <div class="layui-input-block">
                            <select name="areaId"  id="areaId"  :duplex="@eiditinfo.areaId">
                                <option ms-attr="{value: el.code}" ms-for="($index, el) in @arealist">{{el.name}}</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-lg3 layui-col-sm6">
                        <label class="layui-form-label">所属管辖：</label>
                        <div class="layui-input-block">
                            <select  name="divisionId"  :duplex="@eiditinfo.divisionId">

                                <option ms-attr="{value: el.id}" ms-for="($index, el) in @infolist">{{el.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label" :click="changetype(1)">类型 {{type}} </label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="1" title="总校">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="2" title="非直营总校">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="3" title="分校">
                        <input type="radio" name="type" lay-filter="component-form-type" ms-duplex="@type" value="4" title="报名点">
                    </div>

                </div>
                <h5 class="lheight">上级机构：</h5>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6" :if="@readonlys">
                        <label class="layui-form-label">总校：</label>
                        <div class="layui-input-block">
                            <select name="parentId" :duplex="@eiditinfo.gatherId" id="branchId" lay-filter="branchIdSelect">

                            <option ms-attr="{value: el.id}" ms-for="($index, el) in @gathertlist">{{el.name}}</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-inline  layui-col-sm6" :if="@branch">
                        <label class="layui-form-label">分校：</label>
                        <div class="layui-input-block">
                            <select name="parentId" :duplex="@eiditinfo.branchId" >
                             <option ms-attr="{value: el.id}" ms-for="($index, el) in @branchlist">{{el.name}}</option>

                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">总校代码：</label>
                        <div class="layui-input-block">
                            <input lay-verify="required" type="text" ms-duplex="@CodeName.code"  :attr="{readonly: @readonlys}" name="code" class="layui-input" id="">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17">
                            <span class="red">*</span>驾校代码唯一，只能输入数字，10字符内</h6>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">总校名称：</label>
                        <div class="layui-input-block">
                            <input name="name" type="text"  :attr="{readonly: @readonlys}" ms-duplex="@CodeName.name"  lay-verify="required" class="layui-input" id="">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17">
                            <span class="red">*</span>驾校名称唯一，可输入汉字+字母+数字，50字符内</h6>
                    </div>
                </div>
               
                <div class="layui-row layui-col-space10" :if="@readonlys">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">分校或报名点名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" class="layui-input" id="" :duplex="@branchname">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <h6 class="pleft17">若上级机构，总校没有则不显示此栏。</h6>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">驾校地址：</label>
                        <div class="layui-input-block">
                            <input type="text" :blur="getlanglat" name='address'  ms-duplex="@address"  class="layui-input" id="">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <label class="layui-form-label">驾校经纬度：</label>
                        <div class="layui-input-block" style="position: relative;">
                            <input type="text" ms-duplex="@longlat"  readonly     placeholder="" autocomplete="off" class="layui-input" style=" margin-right: 10px; float: left;">
                            <input :click="getlanglat()" id="Button1" type="button" class="layui-btn add_btn" value="搜索" style="position: absolute; right: 0;" />
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-inline  layui-col-sm6">
                        <label class="layui-form-label">驾校联系人：</label>
                        <div class="layui-input-block">
                            <input name='contacts' :duplex="@eiditinfo.contacts" type="text" class="layui-input" id="">
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <label class="layui-form-label">联系人电话：</label>
                        <div class="layui-input-block" style="position: relative;">
                            <input name='mobile' type="text" :duplex="@eiditinfo.mobile"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style=" margin-right: 10px; float: left;">
                        </div>
                    </div>
                </div>
                <div class="layui-fluid layui-row">
                    <div class="layui-col-sm12">
                        <h5 class="lheight red">备注：驾校账号默认联系人电话号码，驾校账号密码默认随机生成，数字+字母的组合，6位字符。</h5>
                    </div>

                </div>
                <h5 class="lheight">驾校图片：</h5>
                <div class="" style="position: relative;">
                    <div class="layui-upload">

                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="demo2">
                                <div class="imglist" ms-for="($index, el) in @show_pics" style="width: 100px;height: 100px;position: relative;float: left;margin-right: 15px;margin-bottom: 15px">
                                    <i :click="removeimg($index)" class="layui-icon layui-icon-close-fill" style="font-size: 20px; color: red;position: absolute;right: -10px;top: -10px;z-index: 10;"></i>    
                                    <img style="width: 100px;height: 100px;"  ms-attr="{src:el} " alt="">
                                </div>
                                <div style="clear: both;">

                                </div>
                            </div>
                        </blockquote>
                        <button type="button" class="layui-btn add_btn" id="test2">
                            <i class="layui-icon-upload-drag layui-icon"></i>图片上传</button>
                    </div>
                </div>


                <!--模板-->


                <div class="layui-form-item layui-col-space10">
                    <div class="layui-input-block">
                        <button id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>
                        <button class="layui-btn btn-left add_btn" lay-submit lay-filter="component-form-element">提交</button>

                    </div>
                </div>
            </form>
        </div>
    </div>


</body>

<script>
    var vm = avalon.define({
        $id: "test",
        provlist: [],
        regionlist: [],
        arealist: [],
        infolist: [],
        gathertlist:[],
        branchlist:[],
        provinceid: '',
        cityid: '',
        areaid: '',
        gatherId:'',
        selected_1: '1',
        selected_2: '1',
        selected_3: '1',
        selected_4:'',
        type:'',
        address:'',
        longlat:'',
        longitude:'',
        latitude:'',
        branchId:'',
        pics:[],
        show_pics:[],
        eiditinfo:{},
        listid:'',
        branch:'',
        CodeName: {
            code: "",
            name: ""
        },
        readonlys: false,
        branchname:'',
        // 获取省份
        getprovlist: function () {
            ax.post({
                url: schoolWebUrl + '/api/captcha/getRegionProvince',
                contentType: "application/x-www-form-urlencoded",
                data: '',
                success: function (r) {
                    vm.provlist = r.data;
                    if(vm.eiditinfo.provinceId){
                        vm.provinceid=vm.eiditinfo.provinceId;

                    }else{
                        vm.provinceid = r.data[0].code;
                    }
                    vm.getRegionlist();
                },
            });
        },
        // 获取市
        getRegionlist: function () {
            ax.post({
                url: schoolWebUrl + '/api/captcha/getRegionCode',
                contentType: "application/x-www-form-urlencoded",
                data: { "code": vm.provinceid },
                success: function (r) {
                    if(vm.eiditinfo.cityId){
                        vm.cityid=vm.eiditinfo.cityId;

                    }else{
                        vm.cityid = r.data[0].code;

                    }
                    vm.regionlist = r.data;
                    vm.getArealist();
                    vm.getinfolist();
                    setTimeout(function () {
                        form.render('select');
                    },200)

                },
            });
        },
        // 获取区县
        getArealist: function () {
            // $('#areaId').empty();
            ax.post({
                url: schoolWebUrl + '/api/captcha/getRegionCode',
                contentType: "application/x-www-form-urlencoded",
                data: { "code": vm.cityid },
                success: function (r) {
                    vm.arealist = (r.data);
                    setTimeout(function () {
                        form.render('select');
                    },200)

                },
            });
        },
        //获取该市下面的车管所
            getinfolist: function () {
                ax.post({
                    url: schoolWebUrl + '/api/division/info',
                    contentType: "application/x-www-form-urlencoded",
                    data: { "cityId": vm.cityid },
                    success: function (r) {
                        vm.infolist = (r.data);
                        setTimeout(function () {
                            form.render('select');
                        },200)
                    },
                });
        },
        // 根据当前用户获取总校信息
        getGather:function(){
            ax.get({
                url: schoolWebUrl + '/api/gather/getTotalGather',
                contentType: "application/x-www-form-urlencoded",
                data: {  },
                success: function (r) {
                    vm.gathertlist = r.data;
                    if(vm.eiditinfo.gatherId){
                        vm.gatherId=vm.eiditinfo.gatherId;

                    }else{
                        vm.gatherId=r.data[0].id;
                    }
                    vm.getbranch();
                },
            });  
        },
          //获取总校下面所有分校
        getbranch:function(){
            ax.post({
                url: schoolWebUrl + '/api/gather/getBranch',
                contentType: "application/x-www-form-urlencoded",
                data: {"gatherId":vm.gatherId  },
                success: function (r) {
                    vm.branchlist = r.data;
                    console.log(r.data)
                    setTimeout(function () {
                        form.render('select');
                    },300)

                },
            });  
        },
        // 获取经纬度
        getlanglat:function(){
            var address= vm.address;
            $.ajax({
                type:'get',
                url:' https://restapi.amap.com/v3/geocode/geo?key=930ccb3f2c1982cbfbe33c328869ae40&address='+address,
                success: function (r) {
                    if(r.status==1){
                        var langlat=r.geocodes[0].location.split(',');
                        vm.longlat=r.geocodes[0].location; 
                        vm.longitude=langlat[0];
                        vm.latitude=langlat[1];

                    }else{
                        layer.alert("地址输入错误请重新输入");
                    }
                }
            });
        },
        //获取总校代码和名称
        getGatherCodeName: function () {
            ax.post({
                url: schoolWebUrl + '/api/gather/getGatherCodeName',
                contentType: "application/x-www-form-urlencoded",
                data: {gatherId: vm.eiditinfo.gatherId},
                success: function (r) {
                    console.log(vm.eiditinfo.gatherId)

                    vm.CodeName = r.data;
                    console.log(r)
                },
            });
        },
        removeimg:function(index){
         console.log(index)
         vm.show_pics.removeAt(index)
         vm.pics.removeAt(index)
        },
        //获取详情
        getdrivinfo:function(){
            //var postData={"id":getQueryString("id")}
            var data={"id":getQueryString("id")}
            vm.listid=getQueryString("id");

            ax.post({
            type: 'POST',
            url: schoolWebUrl + '/api/gather/updateInfo',
            contentType: "application/x-www-form-urlencoded",
            data: data,
            success: function (r) {
                var data=r.data;
                console.log(data)
                vm.eiditinfo=data;
                vm.provinceId=data.provinceId;
                vm.address=data.address;
                vm.areaId=data.areaId;
                vm.longlat=data.longitude+','+data.latitude;
                vm.longitude=data.longitude;
                vm.latitude=data.latitude;
                vm.eiditinfo.gatherId=data.gatherId;
                vm.type=data.type;
                vm.branchname=data.name;
                vm.getprovlist();
                var pic=data.pics.split(',');
                console.log(pic);
                if(pic!=''){
                    for(var i in pic){
                        vm.show_pics.push(fileShowUrl+'?id='+pic[i]);
                        vm.pics.push(pic[i])
                    }
                }
        vm.getGatherCodeName();


                console.log(vm.show_pics)
                 console.log(vm.eiditinfo)
            },

        });

        },

         
    })
    vm.$watch('onReady', function () {
        //获取省市区
        vm.getdrivinfo();
        vm.getGather();
        if(vm.type>2){

        }else {
            vm.CodeName={
                code: vm.eiditinfo.code,
                name: vm.eiditinfo.name,
            }
        }
    });
    vm.$watch('type', function (data) {
        //获取省市区
        console.log(data)
        if (vm.type > 2) {
            // vm.getGatherCodeName();
            vm.readonlys = true;
            if(vm.type==3){
                vm.branch=false;
            }else {
                vm.branch=true;
            }
        } else {
            vm.readonlys = false;



        }

    })

    var table;
    var form;
    layui.use(['table', 'form', 'laydate', 'layer', 'upload'], function () {
        table = layui.table;
        form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload;

        form.on('submit(component-form-element)', function (data) {
            if(vm.type>2){
                data.field.name=vm.branchname;
            }
            data.field.longitude=vm.longitude;
            data.field.latitude=vm.latitude;
            data.field.id=vm.listid;
            if(!data.field.parentId){
                data.field.parentId=data.field.gatherId
            }
            console.log(vm.listid)
            var pics=vm.pics;
            data.field.pics= pics.join(',');
            var index = layer.load(0, {shade: false});
            ax.post({
                url: schoolWebUrl + "/api/gather/update",
                data: data.field,
                contentType: "application/x-www-form-urlencoded",
                success: function (data) {
                    layer.alert(data.message);
                    layer.close(index);
                    if (data.code == 0) {
                        //刷新父页面
                        setTimeout( function(){
                            topFrame.location.reload();
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        }, 2 * 1000 );//延迟2000毫米
                    }
                }
            });
            return false
        })
        form.on('radio(component-form-type)', function (data) {
            vm.type = data.value;
            form.render('select');

        });

        //省改变
        form.on('select(provinceSelect)', function (data) {
            vm.provinceid = data.value;
            vm.getRegionlist();
        });
        // 市改变
        form.on('select(regionSelect)', function (data) {
            vm.cityid = data.value;
            vm.getArealist();
            vm.getinfolist();
        });
        // 总校改变
        form.on('select(branchIdSelect)', function (data) {
            console.log(111)
            vm.eiditinfo.gatherId = data.value;
            vm.getbranch();
            vm.getGatherCodeName();

        });
        // 分校
        form.on('select(branch)', function (data) {
            vm.branchname = data.value;

            vm.getbranch();
        });



        //常规用法
        laydate.render({
            elem: '#activeTime'
            , range: true
        });

//图片上传
        ax.upload({
            elem: '#test2',
            url: fileUploadUrl+"?appId="+appId+"&userId="+currentUserId+"&type="+type,
            before: function(obj){
                //预读本地文件示例，不支持ie8
                /*obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });*/


            },
            done: function(res){
                //上传成功
                 console.log(fileShowUrl+'?id='+res.data)
                 if( vm.show_pics.length>=10){
                     alert('最多上传10张图片');
                      return ;
                }
                 vm.show_pics.push(fileShowUrl+'?id='+res.data)
                 vm.pics.push(res.data);
                 console.log(vm.show_pics)
            }
        });

        $('#btnClose').on("click", function () {
            // topFrame.location.reload();
            // parent.layer.close(parent.layer.getFrameIndex(window.name));
            layer.closeAll();
        });




    });


</script>

</html>